<template>
	<view class="container">
		<!-- 顶部导航 -->
		<view class="navbar">
			<view class="nav-title">核销管理</view>
			<view class="user-info" @click="showLogout">
				<uni-icons type="person" size="24" color="#fff"></uni-icons>
			</view>
		</view>

		<!-- 主要内容区 -->
		<view class="main-content">
			<!-- 选择区域 -->
			<view class="select-container">
				<!-- 秀场名称选择 -->
				<view class="select-item">
					<view class="select-label">秀场名称</view>
					<picker :range="venues" range-key="name" v-model="selectedVenueIndex" @change="handleVenueChange"
						class="picker">
						<view class="picker-view">
							{{ selectedVenueIndex !== null ? venues[selectedVenueIndex].name : '请选择秀场' }}
							<uni-icons type="arrow-down" size="18" color="#86909C" class="picker-icon"></uni-icons>
						</view>
					</picker>
				</view>

				<!-- 日程选择 (依赖秀场选择) -->
				<view class="select-item">
					<view class="select-label">日程活动</view>
					<!-- 修复1：日程选择器应绑定selectedScheduleIndex而非selectedVenueIndex -->
					<picker :range="schedules" range-key="name" v-model="selectedScheduleIndex"
						@change="handleScheduleChange" class="picker">
						<view class="picker-view">
							<!-- 修复2：判断条件和数据索引同步修改 -->
							{{ selectedVenueIndex !== null ? (selectedScheduleIndex !== null ? schedules[selectedScheduleIndex].name : '请选择日程') : '请先选择秀场' }}
							<uni-icons type="arrow-down" size="18" color="#86909C" class="picker-icon"></uni-icons>
						</view>
					</picker>
				</view>

				<!-- 核销人数量 -->
				<view class="select-item">
					<view class="select-label">秀场门票人数</view>
					<div class="totaled">
						<div> <span class="totaled-span">秀场总人数：</span>{{totalPeople.totalPeople}}</div>
						<div> <span class="totaled-span">已核销人数：</span>{{ totalPeople.numberPeople }}</div>
					</div>
				</view>

			</view>

			<!-- 核销按钮 -->
			<view class="verify-btn-container">
				<button class="verify-btn" @click="startVerification" :disabled="!canVerify">
					核销门票
				</button>
			</view>
		</view>

		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<GetQrcode :fashion-id="selectedVenue?.id" :schedule-id="selectedSchedule?.id" @scan-success="handleCancel">
			</GetQrcode>
			<div class="CancelBten" @click="handleCancel">取消扫码</div>
		</uni-popup>



	</view>
</template>

<script>
	import {
		$get,
		$post,
	} from '@/utils/request';
	import GetQrcode from "@/components/qrcode-scanner.vue"
	export default {
		components: {
			GetQrcode
		},
		data() {
			return {
				// 秀场数据
				venues: [],
				// 日程数据 (根据秀场ID关联)
				schedules: [],
				// 秀场选择索引
				selectedVenueIndex: null,
				// 日程选择索引（新增，用于独立绑定日程选择器）
				selectedScheduleIndex: null,
				// 选中的秀场对象
				selectedVenue: null,
				// 选中的日程对象
				selectedSchedule: null,
				totalPeople: {
					totalPeople: 0,
					numberPeople: 0
				}

				//总人数
			};
		},


		computed: {
			// 判断是否可以进行核销
			canVerify() {
				return this.selectedVenue !== null && this.selectedScheduleIndex !== null;
			}
		},

		onLoad() {
			uni.hideTabBar({
				animation: false
			});



		},
		onShow() {
			// 使用uni-app的API获取存储的token，保持与登录时的存储方式一致
			const token = uni.getStorageSync('authToken');
			if (!token || token === '') {
				uni.redirectTo({
					url: '/pages/index/index'
				});
				return false;
			}


			this.checkFashion();

		},
		methods: {
			checkFashion() {
				$get('/sys/webWriteOff/getFashionList').then(res => {
					if (res && res.result && Array.isArray(res.result)) {
						const fashionList = res.result.map(item => ({
							id: item.id,
							name: item.fashionName
						}));
						this.venues = fashionList;
						console.log('处理后的展会列表:', fashionList);
					}
				});
			},
			// 处理秀场选择变化
			handleVenueChange(e) {
				const index = e.detail.value;
				this.selectedVenueIndex = index;
				this.selectedVenue = this.venues[index];

				// 重置日程相关数据
				this.schedules = [];
				this.selectedScheduleIndex = null;
				this.selectedSchedule = null;

				// 根据选择的秀场加载对应的日程
				this.handleGetScheduleList(this.selectedVenue.id);

				console.log('[核销页面] 选择的秀场:', 'ID:', this.selectedVenue.id, '名称:', this.selectedVenue.name);
			},

			handleGetScheduleList(id) { //查询日程活动
				$get("/sys/webWriteOff/getScheduleList", {
					fashionId: id
				}).then(res => {
					console.log("获得日程数据:", res);

					if (res && res.result && Array.isArray(res.result)) {
						const schedulesList = res.result.map(item => ({
							id: item.id,
							name: item.scheduleName
						}));
						this.schedules = schedulesList;
						// 如果只有一个日程，自动选中
						if (schedulesList.length === 1) {
							this.selectedScheduleIndex = 0;
							this.selectedSchedule = schedulesList[0];
						}
					}
				});
			},

			// 处理日程选择变化
			handleScheduleChange(e) {
				const index = e.detail.value;
				this.selectedScheduleIndex = index;
				this.selectedSchedule = this.schedules[index];
				console.log('[核销页面] 选择的日程:', 'ID:', this.selectedSchedule.id, );
				this.handlegetCountList()

			},
			handlegetCountList(id) { //查询总人数
				console.log(id, this.selectedVenue.id);
				$post('/sys/webWriteOff/getCountList', {
					fashionId: this.selectedVenue.id,
					scheduleId: this.selectedSchedule.id
				}).then(res => {
					console.log(res);

					this.totalPeople = res.result
				})
			},


			// 显示退出登录确认
			showLogout() {
				console.log('[核销页面] 显示退出登录确认');
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 清除登录状态
							uni.removeStorageSync('authToken');
							// 跳转到首页
							uni.redirectTo({
								url: '/pages/index/index'
							});
						} else {}
					}
				});
			},
			startVerification() {
				this.$refs.popup.open('top')

			},
			handleCancel() {
				this.$refs.popup.close();

			}

		}
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #f5f7fa;
	}

	/* 导航栏 */
	.navbar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 90rpx;
		background-color: #165DFF;
		padding: 0 30rpx;
		color: #fff;
	}

	.nav-title {
		font-size: 32rpx;
		font-weight: 500;
	}

	.user-info {
		width: 50rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 主要内容区 */
	.main-content {
		flex: 1;
		padding: 30rpx;
	}

	/* 选择区域 */
	.select-container {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
		margin-bottom: 40rpx;
	}

	.select-item {
		display: flex;
		flex-direction: column;
		margin-bottom: 30rpx;
	}

	.select-item:last-child {
		margin-bottom: 0;
	}

	.select-label {
		font-size: 26rpx;
		color: #4E5969;
		margin-bottom: 15rpx;
		font-weight: 500;
	}

	.totaled {
		display: flex;
		gap: 20px;
	}

	.totaled-span {
		color: #666;
	}

	.picker {
		width: 100%;
	}

	.picker-view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		border: 2rpx solid #E5E6EB;
		border-radius: 16rpx;
		padding: 0 30rpx;
		font-size: 26rpx;
		color: #1D2129;
		box-sizing: border-box;
	}

	.picker:disabled .picker-view {
		color: #C9CDD4;
		background-color: #F7F8FA;
	}

	.picker-icon {
		margin-left: 10rpx;
	}

	/* 核销按钮 */
	.verify-btn-container {
		display: flex;
		justify-content: center;
		margin-bottom: 50rpx;
	}

	.verify-btn {
		width: 60%;
		height: 90rpx;
		background-color: #165DFF;
		color: #fff;
		font-size: 28rpx;
		font-weight: 500;
		border-radius: 45rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 6rpx 16rpx rgba(22, 93, 255, 0.2);
		transition: all 0.3s ease;
	}

	.verify-btn:disabled {
		background-color: #C9CDD4;
		box-shadow: none;
	}

	.verify-btn:active:not(:disabled) {
		transform: translateY(4rpx);
		box-shadow: 0 2rpx 8rpx rgba(22, 93, 255, 0.2);
	}

	/* 成功提示 */
	.toast {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(0, 0, 0, 0.7);
		color: #fff;
		padding: 20rpx 40rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
		z-index: 1000;
		animation: fade 1.5s ease;
	}

	.CancelBten {
		width: 100%;
		height: 50px;
		position: fixed;
		bottom: 10%;
		text-align: center;
		color: #fff;
		left: 0;
		z-index: 99;
	}

	@keyframes fade {
		0% {
			opacity: 0;
		}

		20% {
			opacity: 1;
		}

		80% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}
</style>